<!--评价页面  -->
<template>
  <div class="apprise">
    <div class="apprise-head">
      <i class="iconfont icon-zuojiantou" @click="$router.push('/detail')"></i>
      <div>宝贝评价</div>
    </div>
    <div class="appriseTitle">
      <div class="appmiddle">
        <van-tabs
          v-model="activeName"
          color="#fff"
          title-active-color="#ffaf02"
          style="{height:100%}"
        >
          <van-tab title="全部" name="a" style="{height:100%}">
            <div class="amiddle">
              <dl v-for="items in article.allPrise" :key="items.id">
                <dt>
                  <div class="allImgtitle">
                    <img :src="items.allImg" alt="" />{{ items.allName }}
                  </div>
                </dt>
                <dd>
                  <div class="allcontent">{{ items.allSpeak }}</div>
                </dd>
              </dl>
            </div>
          </van-tab>
          <van-tab title="有图/有视频" name="b" style="{height:100%}"> 
            <div class="radio" v-for="itemm in article.radios" :key="itemm.id">
              <div class="imgs">
                <img :src="itemm.pricure" alt="" />
              </div>
              <div class="look">
                <video
                  src="../../video/12.mp4"
                  width="380px"
                  height="200px"
                  controls
                  autoplay
                ></video>
                <!-- <video :src="itemm.radiosimg" width="380px" height="200px" controls autoplay></video> -->
              </div>
            </div>
          </van-tab>
          <van-tab title="追加" name="c" class="addlistPop" style="{height:100%}">
            <button class="buttons" @click="handAdd()">我要追加评价</button>
            <div class="speakAddContent flexList">
              <dl v-for="(item, index) in speakData" :key="index">
                <dt>
                  <div>{{ item.img }}</div>
                  <div>{{ item.username }}</div>
                  <div> {{ item.content }}</div>
                </dt>
                <br><br>
              </dl>
            </div>
            <div class="AddContent aprreovope">
              <div class="username">
                <b class="user">头像：</b
                ><input
                  type="text"
                  placeholder="请输入头像地址"
                  v-model="formData.img"
                  value="formData.username"
                />
              </div>
              <div class="username">
                <b class="user">用户名：</b
                ><input
                  type="text"
                  placeholder="请输入用户名"
                  v-model="formData.username"
                  value="formData.username"
                />
              </div>
              <div class="speakLook">
                <b class="speak">评论：</b
                ><textarea
                  name=""
                  id=""
                  cols="36"
                  rows="4"
                  v-model="formData.content"
                  value="formData.content"
                ></textarea>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <!-- 底部收藏部分 -->
    <van-goods-action class="appListOptionsd">
      <van-goods-action-icon
        icon="star"
        text="已收藏"
        v-if="flag"
        @click="onClickIcon()"
        color="#f00"
      />
      <van-goods-action-icon
        icon="star"
        text="收藏"
        v-if="!flag"
        @click="onClickIcon()"
        color="#ccc"
      />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="onClickButton"
      />
    </van-goods-action>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Vue from "vue";
import { Tab, Tabs } from "vant";
Vue.use(Tab);
Vue.use(Tabs);
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      activeName: "a",
      //控制颜色
      flag: false,
      //评论内容
      speakData: [],
      //评论
      formData: {
        img: "",
        username: "",
        content: "",
      },
    };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapState(["article"]),
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //点击追加评价
    handAdd() {
     
      let data ={
        img: this.formData.img,
        username:this.formData.username,
        content:this.formData.content
      }
      this.speakData.push(data);
      this.formData.img="";
      this.formData.username="";
      this.formData.content="";
    },

    //底部购物车收藏部分
    onClickIcon() {
      this.flag = !this.flag;
    },
    //点击跳转到支付页面
    onClickButton() {
      this.$router.push("/payment");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
.van-tabs {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
.apprise {
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  display: flex;
  flex-direction: column;
}
.apprise-head {
  height: 2.5rem;
  display: flex;
  align-items: center;
  padding: 0 0.3125rem;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 9999;
  background: #ccc;
}
.apprise-head div {
  width: 90%;
  text-align: center;
  font-weight: bold;
}
.apprise-head i {
  font-size: 1.5rem;
}
.amiddle {
  width: 100%;
  height: 100%;
  dl {
    width: 100%;
    height: 20%;
    padding: 1rem 1rem;
    dt {
      width: 100%;
      margin: 1rem;
      font-size: 0.8rem;
      font-weight: bold;
      img {
        width: 2rem;
        height: 2rem;
        border-radius: 2rem;
      }
    }
    dd {
      font-size: 0.8rem;
    }
  }
}
.radio {
  width: 100%;
  height: auto;

  .imgs {
    width: 100%;
    height: 14rem;
    margin: 1rem 0rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.appriseTitle {
  width: 100%;
  height: 100%;
  .appmiddle {
    width: 100%;
    height: 100%;
    // overflow-y: scroll;
    // overflow: hidden;
  }
}

.buttons {
  padding: 0.4rem 2rem;
  margin: 2rem 1rem;
  background: orange;
  border: 0;
  outline: none;
  color: #fff;
}
.AddContent {
  .username {
    margin-top: 5px;
    input {
      border: 0;
      outline: none;
    }
  }
  .speakLook {
    margin-top: 5px;
    textarea {
      border: 0;
      outline: none;
    }
  }
}
.speakAddContent {
  width: 100%;
  dl {
    width: 100%;
    height: 4rem;
    dt {
      img {
        width: 2rem;
        height: 2rem;
        border-radius: 2rem;
      }
      font-size: 1rem;
      font-weight: bold;
    }
    dd {
      font-size: 1rem;
      margin: 0.4rem 0;
    }
  }
}
.active {
  background: orange;
}
.van-tabs--line .van-tabs__content{
  height: 100%;
  flex: 1;
}
// .van-tabs--line .van-tab__pane{
// width: 100%;
// height: 100%;
// }
</style>
